<template>
  <div>
    <el-button type="text" @click="createItem">创建一项</el-button>
    <el-row type="flex" v-for="(item, index) in selectedArr" :key="index" class="margin-16">
      <el-select v-if="item.obj" v-model="item.obj._id" value-key="_id" filterable remote reserve-keyword
        placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading" @focus="currentIndex = index">
        <el-option-group v-for="group in item.selectOptions" :key="group.type" :label="group.type | getTypeName">
          <el-option v-for="jtem in group.list" :key="jtem._id" :label="jtem.name" :value="jtem._id">
            <span style="float: left">{{ jtem.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ jtem.tag && jtem.tag[0] && jtem.tag[0].mid &&
              jtem.tag[0].mid.name }}</span>
          </el-option>
        </el-option-group>
      </el-select>
      <el-input v-if="showNum" v-model="item.num" :disabled="fixNumber" style="margin-left: 12px;width: 80px;">
      </el-input>
      <el-button type="danger" icon="el-icon-delete" style="margin-left: 12px" @click="deleteItem(index)"></el-button>
    </el-row>
  </div>
</template>
<script>
  export default {
    props: {
      fixNumber: {
        type: Boolean,
        default: false
      },
      mid: String,
      showNum: {
        type: Boolean,
        default: true,
      },
      selectedArr: {
        // 已选择的数据
        type: Array,
        default: function () {
          return [
            {
              id: "",
              num: null,
            },
          ];
        },
      },
      module: {
        type: Array,
        default: function () {
          // ["materials", "foods", "anims", "natures", "heros", "geographys"]
          return ["materials", "foods", "anims", "natures"];
        },
      },
    },
    data() {
      return {
        currentIndex: 0, // 当前选中下拉框的索引
        loading: false,
      };
    },
    watch: {
      selectedArr(newValue) {
        this.$emit("update:selectedArr", newValue);
      },
    },
    methods: {
      deleteItem(index) {
        this.selectedArr.splice(index, 1);
      },
      createItem() {
        let item = {}
        if (this.fixNumber) {
          item = {
            obj: {
              _id: "",
              num: 0,
            },
            num: this.fixNumber ? 1 : 3
          }
        } else {
          item = {
            obj: {
              _id: "",
              num: 0,
            }
          }
        }
        this.selectedArr.push(item);
      },
      /**
       * @description 获取搜索数据
       * @param {String} query 当前输入的值
       */
      async remoteMethod(query) {
        if (!query) {
          return;
        }
        this.loading = true;
        let response = await this.axios("/search", {
          params: {
            version: this.$store.state.version,
            searchVal: query,
            module: this.module,
            mid: this.mid,
          },
        });
        this.loading = false;
        return (this.selectedArr[this.currentIndex].selectOptions =
          response.data);
      },
    },
    filters: {
      getTypeName(val) {
        let hashMap = {
          foods: "食物",
          anims: "生物",
          hero: "人物",
          geographys: "地理",
          natures: "自然",
          materials: "科技",
        };
        return hashMap[val];
      },
    },
  };
</script>
<style lang="scss" scoped>
  .margin-16:not(:first-of-type) {
    margin-top: 12px;
  }
</style>